<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库管理平台</title>
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/main.js"></script>
    <style>
        .container {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .left {
            position: absolute;
            width: 70px;
            height: 100%;
            left: 0;
            overflow: hidden;
        }

        .left>.menu {
            height: 80px;
            line-height: 80px;
            border: 1px solid #ddd;
            text-align: center;
            cursor: pointer;
        }

        .left>.menu:hover {
            background-color: mediumseagreen;
            color: #fff;
        }


        .left>.menu:nth-child(2n+1) {
            border-top: 0;
        }

        .left>.menu:first-child {
            margin-top: 10px;
            border-top: 1px solid #ddd;
        }
    </style>
    <style>
        .content {
            position: absolute;
            left: 80px;
            right: 0;
            top: 10px;
            bottom: 40px;
            overflow: hidden;
        }

        .container iframe {
            width: 100%;
            height: 100%;
            border: none;
            overflow: hidden;
        }

        .menu.active {
            background-color: mediumseagreen;
            color: #fff;
        }

        .container .bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            padding-left: 15px;
            line-height: 33px;
            padding-bottom: 10px;
            border-top: 1px solid #868080;
            background-color: #081a2abf;
            color: #fff;
        }

        .container .title {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">
            <div class="menu" menu-url="/index.html">
                返回
            </div>
            <div class="menu active" menu-url="html/mysql/db_table.html">
                表
            </div>
            <div class="menu" menu-url="html/mysql/db_view.html">
                视图
            </div>
            <div class="menu" menu-url="html/mysql/db_proc.html">
                存储过程
            </div>
            <div class="menu" menu-url="html/mysql/db_func.html">
                函数
            </div>
            <div class="menu" menu-url="html/mysql/db_seq.html">
                序列
            </div>
            <div class="menu" menu-url="html/mysql/db_sql.html">
                Sql
            </div>
            <div class="menu" menu-url="html/mysql/db_storage.html">
                数据存储
            </div>
            <div class="menu" menu-url="html/mysql/db_live.html">
                实时监控
            </div>
        </div>
        <div class="content">
            <iframe src="" frameborder="0"></iframe>
        </div>
        <div class="bottom">
            <div class="title"></div>
        </div>
    </div>
    <script>
        var currentDb = getCurrentDb();
        $(".bottom .title").html(`当前数据库: ${currentDb.db}，地址: ${currentDb.addr}，用户: ${currentDb.user}`);
    </script>
    <script>
        $(function () {
            var t = new Date().getTime();
            $(".content>iframe").attr("src", "html/mysql/db_table.html?_t=" + t);
            $(".left").delegate(".menu", "click", function (evt) {
                var url = $(evt.target).attr("menu-url");
                if (url == "/index.html") {
                    window.top.location = url;
                    return;
                }
                var t = new Date().getTime();
                $(".content>iframe").attr("src", url + "?_t=" + t);
                $(".left>.menu").removeClass("active");
                $(evt.target).addClass("active");
            });
        });
    </script>

</body>

</html>